<%@ include file="/common/taglibs.jspf"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Image Upload Function</title>
</head>
<body>
	<form action="${ctx }/imageUpload" method="post" enctype="multipart/form-data">
		<input type="file" name="file"> <input type="submit">
	</form>

	<form id="formForList" action="${ctx}/system/images_list.do">
		<div class="control-group">
			<div class="controls">
				<input type="text" id="inputImgName" name="Q_imgName_S_LK" value="${Q_imgName_S_LK}" placeholder="Search By Image Name">
				<input type="submit" class="btn btn-info" value="Search" style="margin-bottom:9px;">
				<page:pageForList pagingBean="${pageBean}" />
			</div>
		</div>

		<c:forEach var="i" begin="1" end="${pageBean.pageSize/5}">
			<div class="row-fluid">
				<ul class="thumbnails">
					<c:forEach var="img" items="${sysImagesList }" begin="${i*4-4}" end="${i*4-1}">
						<li class="span3">
							<a href="#" class="thumbnail"> 
								<img src="${ctx}/imageShow?imgPath=${img.imgChildpath}" alt="${imgName}" rel="tooltip" onclick="loadImage(${img.imgId})" 
								data-placement="top" title="${imgName}" data-toggle="modal" href="#imageModal">
							</a>
						</li>
					</c:forEach>
				</ul>
			</div>
		</c:forEach>
	</form>

	<div id="imageModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			<h3 id="myModalLabel">Modal Heading</h3>
		</div>
		<div class="modal-body">
		</div>
		<div class="modal-footer">
			<button class="btn" data-dismiss="modal">Close</button>
			<button class="btn btn-primary">Save changes</button>
		</div>
	</div>
	<script type="text/javascript">
		function loadImage(imgId){
			$.ajax({
				url: __ctxPath+"/system/json_get_sys_image.do",
				type : 'POST',
				data : {imgId:imgId},
				success: function (data) {
					var _data = eval('('+data+')');
					if(_data){
						var modalBody = $('.modal-body');
						modalBody.empty();
						modalBody.append('<img src="${ctx}/imageShow?imgPath='+_data.imgPath+'"/>');
						$('#myModalLabel').text(_data.imgName);
						//$('#inputUserName').val(_data.userName);
						//$('#inputPassword').val(_data.password);
						//$('#inputFirstName').val(_data.firstName);
						//$('#inputLastName').val(_data.lastName);
					}
				},
				error: function () {
				}
			});
		};
	</script>
</body>
</html>































<!-- table start 
		  <table id="sysImagesTable" class="table table-bordered table-hover table-condensed">
			  <thead>
				<tr >
					<td colspan="6" >
						<div class="btn-group">
						  <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
						  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
						  <ul class="dropdown-menu">
						    <li><a href="#addUserModal" data-toggle="modal" onclick="getSysUser();"><i class="icon-pencil"></i> Add & Edit</a></li>
						    <li><a href="#" onclick="delSysUser();"><i class="icon-trash"></i> Delete</a></li>
						    <li><a href="#" ><i class="icon-ban-circle"></i> Ban</a></li>
						    <li class="divider"></li>
						    <li><a href="#"><i class="i"></i> Make admin</a></li>
						  </ul>
						</div>
					</td>
				</tr>
		  		<tr>
		  			<th>#</th>
		  			<th>imgId</th>
		  			<th>imgName</th>
		  			<th>imgPath</th>
		  			<th>imgExt</th>
		  			<th>imgSize</th>
		  			<th>uploadDate</th>
		  			<th>imgDesc</th>
		  		</tr>
		  		</thead>
		  		<tbody>
		  		<c:forEach var="img" items="${sysImagesList }">
		  			<tr>
		  				<td>
		  					<input type="checkbox" name="checkboxForUser" value="${img.imgId }">
		  				</td>
		  				<td>
		  					${img.imgId }
		  				</td>
		  				<td>
		  					${img.imgName }
		  				</td>
		  				<td>
		  					${img.imgPath }
		  				</td>
		  				<td>
		  					${img.imgExt }
		  				</td>
		  				<td>
		  					${img.imgSize }
		  				</td>
		  				<td>
		  					${img.uploadDate }
		  				</td>
		  				<td>
		  					${img.imgDesc }
		  				</td>
		  			</tr>
		  		</c:forEach>
		  		</tbody>
		</table>
		-->